<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
// 引入中国地图的json文件
import chinaJson from "./china.json";

// 获取地图的容器
let map = ref();

onMounted(() => {
  // 初始化地图
  initMap();
});

// 注册一下中国地图
echarts.registerMap("china", chinaJson);

const initMap = () => {
  // 初始化地图
  let myChart = echarts.init(map.value);
  // 地图的配置项
  myChart.setOption({
    geo: {
      map: "china", // 地图的名称
      roam: true, // 开启鼠标缩放和平移漫游
      left: 100,
      top: 100,
      right: 100,
      label: {
        show: true, // 是否显示对应地名
        color: "#fff", // 地名的颜色
      },
      // 地图的样式
      itemStyle: {
        areaColor: "#13439b", // 地图的背景颜色
        borderColor: "#7390cb", // 地图的边框颜色
      },
      // 鼠标经过的时候的样式
      emphasis: {
        label: {
          fontSize: 20,
          show: true, // 是否显示对应地名
          color: "#fff", // 地名的颜色
        },
        itemStyle: {
          areaColor: "#19b92e", // 地图的背景颜色
          borderColor: "#ffffff", // 地图的边框颜色
        },
      },
      // 地图上的点
    },
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },
    series: [
      {
        type: "lines",
        data: [
          {
            coords: [
              [113.11, 28.4],
              [116.55, 40.01],
            ],
            lineStyle: { color: "#f9b207", width: 5 },
          },
          {
            coords: [
              [113.11, 28.4],
              [121.48, 31.22],
            ],
            lineStyle: { color: "#f9b207", width: 5 },
          },
          {
            coords: [
              [113.11, 28.4],
              [114.05, 22.54],
            ],
            lineStyle: { color: "#f9b207", width: 5 },
          },
          {
            coords: [
              [113.11, 28.4],
              [108.95, 34.27],
            ],
            lineStyle: { color: "#f9b207", width: 5 },
          },
          {
            coords: [
              [113.11, 28.4],
              [117.0, 36.4],
            ],
            lineStyle: { color: "#f9b207", width: 5 },
          },
          {
            coords: [
              [113.11, 28.4],
              [113.27, 23.13],
            ],
            lineStyle: { color: "#f9b207", width: 5 },
          },
          {
            coords: [
              [113.11, 28.4],
              [108.56, 23.56],
            ],
            lineStyle: { color: "#f9b207", width: 5 },
          },
          {
            coords: [
              [113.11, 28.4],
              [106.27, 29.31],
            ],
            lineStyle: { color: "#f9b207", width: 5 },
          },
          {
            coords: [
              [113.11, 28.4],
              [103.49, 36.03],
            ],
            lineStyle: { color: "#f9b207", width: 5 },
          },
          {
            coords: [
              [113.11, 28.4],
              [101.42, 36.37],
            ],
            lineStyle: { color: "#f9b207", width: 5 },
          },
        ],
        effect: {
          show: true,
          period: 6,
          trailLength: 0.1,
          symbolSize: 10,
          symbol: "arrow",
        },
      },
    ],
  });
};

defineOptions({
  name: "Map",
});
</script>

<template>
  <div class="box4" ref="map"></div>
  <!--  图形的容器必须有高度，不然什么都看不见  -->
</template>

<style scoped lang="scss">
.box4 {
  width: 100%;
  height: 100%;
}
</style>
